<template>
  <div class="native-tinyflow-test">
    <h2>原生Tinyflow测试</h2>

    <div class="test-info">
      <p>测试原生Tinyflow组件是否正常工作</p>
      <p>版本: @tinyflow-ai/ui</p>
    </div>

    <div class="designer-container">
      <div ref="tinyflowContainer" class="tinyflow-canvas"></div>
    </div>

    <div class="controls">
      <button @click="getData">获取数据</button>
      <button @click="clearData">清空数据</button>
    </div>

    <div class="data-display">
      <h3>工作流数据</h3>
      <pre>{{ workflowData }}</pre>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { Tinyflow } from '@tinyflow-ai/ui';

const tinyflowContainer = ref<HTMLElement>();
let tinyflowInstance: any = null;
const workflowData = ref('');

// 简单的Provider配置
const simpleProvider = {
  internal: () => [
    {
      value: 'test-node',
      label: '测试节点',
      icon: 'ant-design:play-circle-outlined',
    },
  ],
  knowledge: () => [],
  llm: () => [],
};

// 简单的自定义节点
const simpleCustomNodes = {
  'custom-test': {
    title: '自定义测试节点',
    description: '这是一个测试自定义节点',
    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7l-10-5z"></path></svg>',
    sortNo: 1,
    group: 'base',
    render: (parent: any, node: any, flowInstance: any) => {
      parent.innerHTML = `
        <div style="padding: 8px;">
          <div style="margin-bottom: 8px;">
            <label style="display: block; margin-bottom: 4px; font-weight: bold;">测试配置:</label>
            <select style="width: 100%; padding: 4px; border: 1px solid #d9d9d9; border-radius: 4px;">
              <option value="option1">选项1</option>
              <option value="option2">选项2</option>
              <option value="option3">选项3</option>
            </select>
          </div>
          <div>
            <label style="display: block; margin-bottom: 4px; font-weight: bold;">测试值:</label>
            <input type="text" placeholder="请输入测试值" style="width: 100%; padding: 4px; border: 1px solid #d9d9d9; border-radius: 4px;">
          </div>
        </div>
      `;

      const select = parent.querySelector('select');
      const input = parent.querySelector('input');

      const updateData = () => {
        flowInstance.updateNodeData(node.id, {
          testOption: select?.value || 'option1',
          testValue: input?.value || '',
        });
      };

      select?.addEventListener('change', updateData);
      input?.addEventListener('input', updateData);
    },
    onUpdate: (parent: any, node: any) => {
      console.log('自定义测试节点更新:', node);
    },
  },
};

// 初始化Tinyflow
onMounted(() => {
  if (tinyflowContainer.value) {
    console.log('初始化原生Tinyflow...');

    try {
      tinyflowInstance = new Tinyflow({
        element: tinyflowContainer.value,
        data: {
          nodes: [],
          edges: [],
          viewport: { x: 0, y: 0, zoom: 1 },
        },
        provider: simpleProvider,
        customNodes: simpleCustomNodes,
      });

      console.log('Tinyflow实例创建成功:', tinyflowInstance);
    } catch (error) {
      console.error('Tinyflow初始化失败:', error);
    }
  }
});

// 销毁Tinyflow
onUnmounted(() => {
  if (tinyflowInstance) {
    try {
      tinyflowInstance.destroy();
      tinyflowInstance = null;
      console.log('Tinyflow实例已销毁');
    } catch (error) {
      console.error('Tinyflow销毁失败:', error);
    }
  }
});

// 获取数据
const getData = () => {
  if (tinyflowInstance) {
    try {
      const data = tinyflowInstance.getData();
      workflowData.value = JSON.stringify(data, null, 2);
      console.log('获取到工作流数据:', data);
    } catch (error) {
      console.error('获取数据失败:', error);
      workflowData.value = '获取数据失败: ' + error;
    }
  } else {
    workflowData.value = 'Tinyflow实例未初始化';
  }
};

// 清空数据
const clearData = () => {
  workflowData.value = '';
};
</script>

<style lang="less" scoped>
.native-tinyflow-test {
  padding: 24px;

  h2 {
    margin-bottom: 16px;
    color: #1890ff;
  }

  .test-info {
    margin-bottom: 24px;
    padding: 16px;
    background: #f5f5f5;
    border-radius: 6px;

    p {
      margin: 4px 0;
      color: #666;
    }
  }

  .designer-container {
    height: 400px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;

    .tinyflow-canvas {
      height: 100%;
      width: 100%;
    }
  }

  .controls {
    margin-bottom: 24px;

    button {
      margin-right: 12px;
      padding: 8px 16px;
      background: #1890ff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;

      &:hover {
        background: #40a9ff;
      }
    }
  }

  .data-display {
    h3 {
      margin-bottom: 12px;
      color: #333;
    }

    pre {
      background: #f5f5f5;
      padding: 16px;
      border-radius: 6px;
      overflow: auto;
      max-height: 300px;
      font-size: 12px;
      border: 1px solid #e8e8e8;
    }
  }
}
</style>
